<template>
	<view>
		<swiper :indicator-dots="true" 
		:autoplay="true" 
		:interval="3000" 
		:duration="1000" 
		:circular="true"
		indicator-color="rgb(204,204,204)"
		indicator-active-color="rgb(47,120,255)">
			<swiper-item>
				<view class="swiper-item"><image src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u45.png"></image></view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item"><image src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u46.png"></image></view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item"><image src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u47.png"></image></view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item"><image src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u48.png"></image></view>
			</swiper-item>
		</swiper>
		<view class="navlist">
			<view class="navlist-box">
				<view class="navlist-item" @click="goto1">
					<view>
						<image class="" mode="top" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u56.png"></image>
						<image class="navicon" mode="heightFix" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u58.png"></image>
					</view>
					<text>热门课程</text>
				</view>
				<view class="navlist-item" @click="goto2">
					<view>
						<image class="" mode="top" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u60.png"></image>
						<image class="navicon" mode="heightFix" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u62.png"></image>
					</view>
					<text>教育头条</text>
				</view>
				<view class="navlist-item" @click="goto3">
					<view>
						<image class="" mode="top" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u64.png"></image>
						<image class="navicon" mode="heightFix" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u66.png"></image>
					</view>
					<text>非翔活动</text>
				</view>
				<view class="navlist-item" @click="goto4">
					<view>
						<image class="" mode="top" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u68.png"></image>
						<image class="navicon" mode="heightFix" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u70.png"></image>
					</view>
					<text>咨询教师</text>
				</view>
			</view>
		</view>
		<view class="info-header">
			<text class="header-left">明星教师</text>
			<text class="header-right">更多&nbsp;&gt;</text>
		</view>
		<view class="teacher-list">
			<movable-area class="teacher-area">
				<movable-view direction="horizontal" out-of-bounds="true" class="teacher-box">
					<view class="teacher-item">
						<image mode="top" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u81.png"></image>
						<text class="teacher-text1">吴老师</text>
						<text class="teacher-text2">小学奥数辅导</text>
					</view>
					<view class="teacher-item">
						<image mode="top" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u86.png"></image>
						<text class="teacher-text1">Jason</text>
						<text class="teacher-text2">英语外教</text>
					</view>
					<view class="teacher-item">
						<image mode="top" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u91.png"></image>
						<text class="teacher-text1">刘老师</text>
						<text class="teacher-text2">中学化学辅导</text>
					</view>
					<view class="teacher-item">
						<image mode="top" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u91.png"></image>
						<text class="teacher-text1">贾仲元</text>
						<text class="teacher-text2">小学武术陪练</text>
					</view>
				</movable-view>
			</movable-area>
		</view>
		<view class="info-header">
			<text class="header-left">热门课程</text>
			<navigator url="../Popular-courses/Popular-courses" hover-class="none" open-type="switchTab">
			<text class="header-right" >更多&nbsp;&gt;</text>
			</navigator>
		</view>
		<view class="lession-list">
			<Teacher v-for="v in lessonlist" :key="v.id" :coursename="v.coursename" :url="v.url" :courseprice="v.courseprice" :id="v.id"></Teacher>
		</view>
		<view class="info-header">
			<text class="header-left">热门活动</text>
			<navigator url="../Activity/Activity" hover-class="none">
			<text class="header-right">更多&nbsp;&gt;</text>
			</navigator>
		</view>
		<view class="active-list">
			<ActivityModule :data="data"></ActivityModule>
		</view>
	</view>
</template>

<script setup>
	import {ref,onMounted} from 'vue'
	import Teacher from '@/components/Teacher/Teacher.vue'
	import ActivityModule from '@/components/ActivityModule/ActivityModule.vue'
	import http from "../../utils/http";
	// export default {
	// 	components:{
	// 	    Teacher:Teacher
	// 	},
	// 	setup(props,context){
	// 		const abc = ref('妮妮')
	// 		return{
	// 			abc
	// 		}
	// 	}
	// }
	
	
	//数据的声明
	let playlist = ref([])
	let lessonlist = ref([])
	const data=ref([]);
	
	//列表等跳转函数
	const goto1 = ()=>{
		uni.switchTab({
			url:'/pages/Popular-courses/Popular-courses'
		})
	}
	const goto2 = ()=>{
		uni.redirectTo({
			url:'/pages/Education-headline/Education-headline'
		})
	}
	const goto3 = ()=>{
		uni.redirectTo({
			url:'/pages/Activity/Activity'
		})
	}
	const goto4 = ()=>{
		uni.redirectTo({
			url:'/pages/collection/collection'
		})
	}
	// const goto5 = ()=>{
		
	// 	uni.redirectTo({
	// 		url:'../collection/collection'
	// 	})
	// }
	
	//轮播图请求
	// const getImg=function(){
	// 	http({
	// 		url:'/play/list',
	// 		params:{
	// 			page:1,
	// 			limit:4
	// 		}
	// 	}).then((data)=>{
	// 		console.log(data.data.list);
	// 		if(data.code==0){
	// 			playlist.value=data.data.list
	// 			// console.log(playlist[0].playurl);
	// 		}
	// 	})
	// }
	
	
	//课程信息的请求
	const getLes=function(){
		http({
			url:'/course/list',
			params:{
				// page:page.value,
				// limit:limit.value
				page:1,
				limit:4
			}
		}).then((data)=>{
			console.log(data.data.list);
			if(data.code==0){
				lessonlist.value=data.data.list;
			}
		})
	}
	
	//热门活动的请求
	const actData = function(){
		http({
			url:'/activityList',
			params:{
				page:1,
				limit:4
			},
		}).then((res)=>{
			console.log(res.data.list);
			if(res.code===0){
				data.value=res.data.list
				console.log(data.value);
			}
		})
	}
	
	
	
	onMounted(()=>{
		// getImg(),
		getLes(),
		actData()
	})
</script>

<style lang="less" scoped>
	//轮播图样式
	swiper{
		margin: 10rpx 0;
		width: 750rpx;
		height: 420rpx;
	}
	swiper-item{
		display: flex;
		justify-content: center;
	}
	.swiper-item{
		height: 380rpx;
		width: 700rpx;
	}
	swiper image{
		width: 700rpx;
		height: 380rpx;
	}
	//list样式
	.navlist{
		margin-top: 30rpx;
		margin-bottom: 50rpx;
		width: 750rpx;
		height: 160rpx;
		display: flex;
		justify-content: center;
	}
	.navlist-box{
		width: 700rpx;
		height: 160rpx;
		display: flex;
		justify-content: space-between;
	}
	.navlist-item{
		width: 150rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
	}
	.navlist-item>view{
		width: 150rpx;
		height: 114rpx;
		position: relative;
	}
	.navlist-item>view>image{
		width: 150rpx;
		height: 150rpx;
	}
	.navlist-item>view>.navicon{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 36rpx;
		left: 52rpx;
	}
	//标题的模板样式
	.info-header{
		// background-color: red;
		width: 750rpx;
		height: 70rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header-left{
		font-size: 40rpx;
		font-weight: 800;
	}
	.header-right{
		font-size: 28rpx;
		color: rgb(153, 153, 153);
	}
	//教师list的样式
	.teacher-list{
		margin-top: 40rpx;
		margin-bottom: 50rpx;
		box-sizing: border-box;
		padding: 0 26rpx;
		overflow: hidden;
		width: 750rpx;
		height: 240rpx;
		display: flex;
		justify-content: center;
	}
	.teacher-area{
		width: 698rpx;
		height: 240rpx;
	}
	.teacher-box{
		width: 900rpx;
		height: 240rpx;
		display: flex;
		justify-content: space-between;
	}
	.teacher-item{
		background-color: rgb(248, 248, 248);
		width: 200rpx;
		height: 240rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.teacher-item>.teacher-text1{
		color: rgb(47, 120, 255);
		font-size: 32rpx;
	}
	.teacher-item>.teacher-text2{
		font-size: 28rpx;
		color: rgb(102, 102, 102);
	}
	//热门课程样式
	.lession-list{
		margin: 30rpx 0;
		width: 750rpx;
		// height: 750rpx;
		box-sizing: border-box;
		padding: 0 26rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	//热门活动样式
	.active-list{
		// background-color: gray;
		margin: 30rpx 0;
		width: 750rpx;
		// height: 650rpx;
		box-sizing: border-box;
		padding: 0 26rpx;
		display: flex;
		flex-direction: column;
	}
</style>
